import { FC, PropsWithChildren } from "react";
import { createGlobalStyle, css, keyframes, RuleSet, styled } from "styled-components";

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`

const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  font-size: 50px;
  padding: 30px;
`
const animation = css`
  animation: ${rotate} 2s linear infinite;
`

const Rotate2 = styled.div`
  display: inline-block;
  ${animation};
  font-size: 50px;
  padding: 30px;
`

const animation2 = css<{ $duration: number }>`
  animation: ${rotate} ${props => props.$duration}s linear infinite;
`

const Rotate3 = styled.div<{ $duration: number, otherStyles?: RuleSet }>`
  display: inline-block;
  ${animation2};
  font-size: 50px;
  padding: 30px;
  ${props => props.otherStyles};
`

export function StyledComponentsTest8() {
  return <div>
    <Rotate>X</Rotate>
    <Rotate2>X</Rotate2>
    <Rotate3 $duration={3} otherStyles={[
      {border: '1px', background: 'pink'},
      {boxShadow: '0 0 3px blue'}
    ]}>X</Rotate3>
  </div>
}